<!--
 * @Author: AuroCaffe 18509564594@163.com
 * @Date: 2025-07-26 16:24:41
 * @LastEditors: AuroCaffe 18509564594@163.com
 * @LastEditTime: 2025-07-26 17:30:02
 * @FilePath: \HuiLin\pages\mePages\shopCenter\analytics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="analytics-container">
		<!-- 头部导航栏 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content">
					<view class="header-left" @click="closePage">
						<text class="cuIcon-back"></text>
					</view>
					<view class="header-center">
						<text class="header-title">数据分析</text>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容 -->
		<view class="main-content">
			<!-- 时间筛选 -->
			<view class="period-selector">
				<view class="period-tabs">
					<view 
						class="period-tab" 
						:class="{ active: currentPeriod === 'today' }"
						@click="changePeriod('today')"
					>
						<text>今日</text>
					</view>
					<view 
						class="period-tab" 
						:class="{ active: currentPeriod === 'week' }"
						@click="changePeriod('week')"
					>
						<text>本周</text>
					</view>
					<view 
						class="period-tab" 
						:class="{ active: currentPeriod === 'month' }"
						@click="changePeriod('month')"
					>
						<text>本月</text>
					</view>
					<view 
						class="period-tab" 
						:class="{ active: currentPeriod === 'year' }"
						@click="changePeriod('year')"
					>
						<text>本年</text>
					</view>
				</view>
			</view>

			<!-- 核心指标 -->
			<view class="metrics-grid">
				<view class="metrics-row">
					<view class="metric-card">
						<view class="metric-icon">💰</view>
						<view class="metric-content">
							<text class="metric-value">¥{{ formatMoney(analytics.totalRevenue) }}</text>
							<text class="metric-label">总收入</text>
							<text class="metric-change" :class="revenueChangeClass">
								{{ formatChange(analytics.revenueChange) }}
							</text>
						</view>
					</view>
					
					<view class="metric-card">
						<view class="metric-icon">📦</view>
						<view class="metric-content">
							<text class="metric-value">{{ analytics.totalOrders }}</text>
							<text class="metric-label">总订单</text>
							<text class="metric-change" :class="orderChangeClass">
								{{ formatChange(analytics.orderChange) }}
							</text>
						</view>
					</view>
				</view>
				<view class="metrics-row">
					<view class="metric-card">
						<view class="metric-icon">👥</view>
						<view class="metric-content">
							<text class="metric-value">{{ analytics.totalCustomers }}</text>
							<text class="metric-label">客户数</text>
							<text class="metric-change" :class="customerChangeClass">
								{{ formatChange(analytics.customerChange) }}
							</text>
						</view>
					</view>
					
					<view class="metric-card">
						<view class="metric-icon">📊</view>
						<view class="metric-content">
							<text class="metric-value">¥{{ formatMoney(analytics.averageOrder) }}</text>
							<text class="metric-label">客单价</text>
							<text class="metric-change" :class="averageChangeClass">
								{{ formatChange(analytics.averageChange) }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单状态分布 -->
			<view class="chart-section">
				<view class="section-title">
					<text class="section-icon">📦</text>
					订单状态分布
				</view>
				<view class="order-status-chart">
					<view 
						class="status-item" 
						v-for="status in orderStatus" 
						:key="status.status"
					>
						<view class="status-color" :style="{ backgroundColor: status.color }"></view>
						<view class="status-info">
							<text class="status-name">{{ status.name }}</text>
							<text class="status-count">{{ status.count }}</text>
						</view>
						<text class="status-percentage">{{ status.percentage }}%</text>
					</view>
				</view>
			</view>

			<!-- 热销商品 -->
			<view class="chart-section">
				<view class="section-title">
					<text class="section-icon">🔥</text>
					热销商品
				</view>
				<view class="hot-products">
					<view 
						class="product-item" 
						v-for="(product, index) in hotProducts" 
						:key="product._id"
					>
						<view class="product-rank">{{ index + 1 }}</view>
						<image class="product-image" :src="product.image" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-name">{{ product.name }}</text>
							<text class="product-sales">销量: {{ product.sales }}</text>
						</view>
						<text class="product-revenue">¥{{ formatMoney(product.revenue) }}</text>
					</view>
				</view>
			</view>

			<!-- 收入趋势 -->
			<view class="chart-section">
				<view class="section-title">
					<text class="section-icon">📈</text>
					收入趋势
				</view>
				<view class="revenue-trend">
					<view class="trend-chart">
						<view class="trend-bars">
							<view 
								class="trend-bar" 
								v-for="(item, index) in revenueTrend" 
								:key="index"
								:style="item.barStyle"
							></view>
						</view>
						<view class="trend-labels">
							<text class="trend-label">{{ getFirstDate() }}</text>
							<text class="trend-label">{{ getLastDate() }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import headerSlot from '@/components/header-slot.vue'
import { getShopAnalytics } from '@/api/shop.js'

export default {
	components: {
		headerSlot
	},
	data() {
		return {
			currentPeriod: 'week',
			analytics: {
				totalRevenue: 0,
				totalOrders: 0,
				totalCustomers: 0,
				averageOrder: 0,
				revenueChange: 0,
				orderChange: 0,
				customerChange: 0,
				averageChange: 0
			},
			orderStatus: [],
			hotProducts: [],
			revenueTrend: [],
			loading: false
		}
	},
	computed: {
		// 收入变化样式类
		revenueChangeClass() {
			return this.analytics.revenueChange >= 0 ? 'positive' : 'negative'
		},
		// 订单变化样式类
		orderChangeClass() {
			return this.analytics.orderChange >= 0 ? 'positive' : 'negative'
		},
		// 客户变化样式类
		customerChangeClass() {
			return this.analytics.customerChange >= 0 ? 'positive' : 'negative'
		},
		// 客单价变化样式类
		averageChangeClass() {
			return this.analytics.averageChange >= 0 ? 'positive' : 'negative'
		},
		// 获取趋势条样式
		getTrendBarStyle(amount) {
			const maxAmount = Math.max(...this.revenueTrend.map(item => item.amount))
			const height = maxAmount > 0 ? (amount / maxAmount) * 100 : 0
			return {
				height: `${height}%`
			}
		}
	},
	onShow() {
		this.loadAnalytics()
	},
	methods: {
		// 关闭页面
		closePage() {
			uni.navigateBack()
		},
		
		// 刷新数据
		refreshData() {
			this.loadAnalytics()
		},
		
		// 切换时间周期
		changePeriod(period) {
			this.currentPeriod = period
			this.loadAnalytics()
		},
		
		// 加载数据分析
		async loadAnalytics() {
			try {
				this.loading = true
				const res = await getShopAnalytics(this.currentPeriod)
				if (res.code === 200) {
					this.analytics = res.data.analytics
					this.orderStatus = res.data.orderStatus
					this.hotProducts = res.data.hotProducts
					
					// 处理趋势图高度
					const trend = res.data.revenueTrend || []
					const maxAmount = Math.max(...trend.map(item => item.amount))
					this.revenueTrend = trend.map(item => {
						const height = maxAmount > 0 ? (item.amount / maxAmount) * 100 : 0
						return {
							...item,
							barStyle: `height:${height}%`
						}
					})
				}
			} catch (error) {
				console.error('加载数据分析失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		// 格式化金额
		formatMoney(amount) {
			return Number(amount || 0).toFixed(2)
		},
		
		// 格式化变化率
		formatChange(change) {
			const sign = change >= 0 ? '+' : ''
			return `${sign}${change.toFixed(1)}%`
		},
		
		// 获取第一个日期
		getFirstDate() {
			return this.revenueTrend.length > 0 ? this.revenueTrend[0].date : '日期'
		},

		// 获取最后一个日期
		getLastDate() {
			return this.revenueTrend.length > 0 ? this.revenueTrend[this.revenueTrend.length - 1].date : '日期'
		}
	}
}
</script>

<style lang="scss" scoped>
.analytics-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding-bottom: 120rpx;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 32rpx;
	background: transparent;
}

.header-left, .header-right {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;

}

.header-center {
	flex: 1;
	text-align: center;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
}

.main-content {
	padding: 32rpx;
}

.period-selector {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10rpx);
	
	.period-tabs {
		display: flex;
		justify-content: space-between;
		
		.period-tab {
			flex: 1;
			text-align: center;
			padding: 20rpx 16rpx;
			margin: 0 8rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-weight: bold;
			transition: all 0.3s ease;
			position: relative;
			
			&:first-child {
				margin-left: 0;
			}
			
			&:last-child {
				margin-right: 0;
			}
			
			&.active {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: #fff;
				box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
			}
			
			&:not(.active) {
				background: #f8f9fa;
				color: #666;
				border: 1rpx solid #e9ecef;
			}
		}
	}
}

.metrics-grid {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10rpx);
	
	.metrics-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
		margin-bottom: 32rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.metric-card {
			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
			border-radius: 20rpx;
			padding: 32rpx;
			border: 1rpx solid #e9ecef;
			text-align: center;
			transition: all 0.3s ease;
			
			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			}
			
			.metric-icon {
				width: 60rpx;
				height: 60rpx;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #fff;
				margin: 0 auto 16rpx;
				box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
			}
			
			.metric-value {
				font-size: 40rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 12rpx;
				display: block;
			}
			
			.metric-label {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 16rpx;
			}
			
			.metric-change {
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
				font-weight: bold;
				
				&.positive {
					background: #e8f5e8;
					color: #4caf50;
				}
				
				&.negative {
					background: #ffebee;
					color: #f44336;
				}
			}
		}
	}
}

.chart-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10rpx);
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 32rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		
		.section-icon {
			width: 40rpx;
			height: 40rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #fff;
			margin-right: 16rpx;
		}
	}
	
	.order-status-chart {
		.status-item {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.status-color {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
			
			.status-info {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.status-name {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}
				
				.status-count {
					font-size: 28rpx;
					color: #666;
				}
			}
			
			.status-percentage {
				font-size: 26rpx;
				color: #999;
				margin-left: 16rpx;
			}
		}
	}
	
	.hot-products {
		.product-item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.product-rank {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: bold;
				margin-right: 16rpx;
			}
			
			.product-image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				background: #f8f9fa;
				border: 1rpx solid #e9ecef;
			}
			
			.product-info {
				flex: 1;
				
				.product-name {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				
				.product-sales {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.product-revenue {
				font-size: 28rpx;
				color: #f44336;
				font-weight: bold;
			}
		}
	}
	
	.revenue-trend {
		.trend-chart {
			height: 300rpx;
			background: #f8f9fa;
			border-radius: 16rpx;
			padding: 24rpx;
			position: relative;
			overflow: hidden;
			
			.trend-bars {
				display: flex;
				align-items: end;
				justify-content: space-between;
				height: 200rpx;
				padding: 0 16rpx;
				
				.trend-bar {
					flex: 1;
					margin: 0 8rpx;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					border-radius: 8rpx 8rpx 0 0;
					position: relative;
					transition: all 0.3s ease;
					
					&:hover {
						transform: scaleY(1.1);
					}
				}
			}
			
			.trend-labels {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
				padding: 0 16rpx;
				
				.trend-label {
					flex: 1;
					text-align: center;
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
}

.empty-state {
	text-align: center;
	padding: 120rpx 32rpx;
	
	.empty-icon {
		font-size: 120rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 32rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 16rpx;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.6);
	}
}

.loading {
	text-align: center;
	padding: 80rpx 32rpx;
	
	.loading-text {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}
}
</style> 